<template>
	<view class="">
		<u-navbar titleStyle="font-size:40rpx;color:#333" :placeholder='true' title="投诉反馈" :autoBack="true"></u-navbar>
		<view style="background:#fff" class="padding32">
			<view class="fontS32 ">
				类型
			</view>
			<scroll-view scroll-x="true" style="height: 48rpx;margin-top: 20rpx;">
				<view class="flex" style="flex-wrap: nowrap;padding-left: 24rpx;">
					<view @click="active=index" v-for="(item,index) in listArray" :key="index" class="lis center"
						style="min-width: 130rpx;" :class="active==index?'bgcred cof':'lisInactive'">
						{{item.name}}
					</view>
				</view>
			</scroll-view>
			<view class="fontS32 mt24">
				反馈说明
			</view>
			<u-textarea maxlength='300' count v-model="value" placeholder="请详细说明，以便我们解决问题，您最多可填写300字"
				placeholderStyle="colo:#999;font-size:28rpx" border='none' confirmType='done'></u-textarea>
			<view class="flex mt24" style="flex-wrap: wrap;">
				<view class="relative" v-for="(item,index) in  image" style="margin:0 10rpx 10rpx 0rpx;">
					<view class="absolute" style="top: -15rpx;right: 0;z-index: 9;" @click="del(index)">
						<u-icon name="close-circle" :color="$store.state.homeRed" size="30rpx"></u-icon>
					</view>
					<image :src="item" mode=""  style="width: 94rpx;height: 94rpx;border-radius: 8rpx;">
					</image>
				</view>
				<view class="upImage flexRowCenter" @click="upImg" style="margin:0 10rpx 10rpx 0rpx;">
					<u-icon name='plus' size='32' color="#ccc"></u-icon>
				</view>
			</view>

			<view class="fontS32 mb24" style="margin-top: 60rpx;">
				联系方式
			</view>
			<u-input placeholder="请留下一个能联系您的联系方式" border="none" v-model="phone" style='padding: 0' type="number"
				placeholderStyle="colo:#999;font-size:28rpx"></u-input>
		</view>
		<view class="fixed bottomBtn cof " @click="submit">
			<view class="bgcred btn center">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 0, //当前投诉的问题
				phone: "", //联系方式
				value: "", //反馈值
				listArray: [],
				image: [],
			}
		},
		methods: {
			// 删除图片
			del(index){
				this.image.splice(index,1)
			},
			upImg() {

				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera '], //手机拍照
					success: (res) => {
						uni.showLoading({
							title: '上传中'
						})
						const tempFilePaths = res.tempFilePaths;
						tempFilePaths.forEach(item => {
							uni.uploadFile({
								url: this.$my.url + '/index/com/file',
								filePath: item,
								name: 'file',
								header: {
									"Accept-Language": uni.getStorageSync('locale') ? uni.getStorageSync('locale') : 'zh',
									'token': uni.getStorageSync('token'),
								},
								formData: {
									"file": tempFilePaths[0],
									 use: 'company_photo'
								},
								success: (uploadFileRes) => {
									uni.hideLoading()
									let res = JSON.parse(uploadFileRes.data);
									if (res.code == 200) {
										this.image.push(res.data.file_path)
									}
								},
								fail:()=> {
									// uni.hideLoading()
									this.$my.toast('上传失败')
								}
							});
						})
					}
				});
			},
			submit() {
				this.$my.post('/index/user/complaint', {
					content: this.value,
					image: this.image,
					category_id: this.listArray[this.active].id,
					phone: this.phone
				}).then(res => {
					this.$my.toast(res.message)
					if (res.code == 200) {
						this.$my.go('', 500)
					}
				})
			},
		},
		onLoad() {
			this.$my.post('/index/com/getComplaintCategory').then(res => {
				if (res.code == 200) {
					this.listArray = res.data
				}
			})
		}
	}
</script>

<style lang="scss" scoped>
	.bottomBtn {
		.btn {
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 40rpx;
		}

		padding: 16rpx 32rpx;
		box-sizing: border-box;
		bottom: 0;
		width: 100%;
		left: 0;
		background-color: #fff;
	}

	.upImage {
		width: 92rpx;
		height: 92rpx;
		border: 2rpx solid #CCCCCC;
		border-radius: 8rpx;
	}

	/deep/ .u-textarea {
		padding: 24rpx 0;
	}

	.lis {
		border-radius: 48rpx;
		height: 48rpx;
		line-height: 48rpx;
		padding: 0 24rpx;
		margin-right: 40rpx;

	}

	.lisInactive {
		background: #F0F0F0;
		color: #999;
	}
</style>
